<template>
  <div class="app-wrapper">
    <div class="app-header">
      <div class="logo">
        <img alt>
        <span>XYZ管理系统</span>
      </div>

      <div class="menu">
        <ul>
          <li>menu</li>
        </ul>
      </div>

      <div class="person">
        <span class="username" @click="$pub.login">用户名</span>
        <el-button type="text" :loading="isDoingLogout" @click="logout">注销</el-button>
      </div>
    </div>
    <!-- header end -->

    <div class="app-main">
      <div class="app-side">
        <el-menu
          v-if="currentSystemMenu && currentSystemMenu.length"
          :router="false"
          :default-active="currentTabFlag"
          background-color="#FFF"
          active-text-color="#5406C5"
          text-color="#333">

          <side-menu :menus="currentSystemMenu"></side-menu>

        </el-menu>
      </div>

      <div class="app-content">
        <div class="app-tab">
          <el-tabs
            v-show="tabList.length"
            ref="tab"
            :value="currentTabFlag"
            type="card"
            @tab-remove="onTabRemove"
            @tab-click="onTabChange"
          >
            <el-tab-pane v-for="item in tabList" :name="item.flag" :key="item.flag" :closable="true">
              <span slot="label">
                <i class="el-icon-full-screen" @click="setFullscreen(true)"></i>
                {{ item.title }}
              </span>
              <div class="tab-page-content" :class="{'is-fullscreen': fullscreen}">
                <component :is="item.components[item.components.length - 1].name" v-if="item.components && item.components.length"></component>
              </div>
            </el-tab-pane>
          </el-tabs>

          <div class="no-tab" v-show="tabList.length === 0">
            <div>
              <i class="el-icon-cold-drink"></i>
              <p>暂时没有工作，休息一会~</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import sideMenu from "@/components/side-menu.vue";

export default {
  components: {
    sideMenu,
  },
  data() {
    return {
      currentSystemMenu: [],
      isDoingLogout: false,
      // currentTabFlag: '1',
      // currentMenuFlag: '',
      // unfoldMenus: [],
    };
  },
  computed: {
    fullscreen() {
      return this.$store.state.fullscreen;
    },
    tabList() {
      return this.$store.state.openedTabs;
    },
    currentTabFlag() {
      return this.$store.state.activedTabFlag;
    },
  },
  created() {
    document.addEventListener('keyup', (e) => {
      if (e.keyCode === 27) {
        this.$store.commit('setFullscreen', false);
        e.stopPropagation();
      }
    }, true);
  },
  mounted() {
    this.currentSystemMenu = [{
      name: '首页',
      flag: 'welcome'
    }, {
      name: '导航a',
      flag: 'a',
      children: [{
        name: '导航a-1',
        flag: 'a-1',
      }],
    }, {
      name: '导航b',
      flag: 'b',
      children: [{
        name: '表格案例',
        flag: 'b-1',
      }, {
        name: '表单案例',
        flag: 'b-2',
      }, {
        name: '可视化图表',
        flag: 'b-3',
      }],
    }];

    this.currentMenuFlag = 'a-1';
    // if (this.$route.query.tab) {
    //   this.$store.commit('__reshowTab', this.$route.query.tab);
    // }
  },
  methods: {
    logout() {

    },
    onTabRemove(v) {
      this.$store.commit('__removeTab', v);
    },
    onTabChange(v) {
      this.$store.commit('__showTab', v.name);
    },
    setFullscreen(v) {
      this.$store.commit('setFullscreen', v);
      if (v) {
        this.$message.info('要退出全屏，请按下 Esc 键。');
      }
    },
  },
}
</script>


<style lang="scss">

</style>